<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=pQFgFpS0VnMXwCRN6cTc1jDOcBVi3XoD"></script>
	<title>资产分布地图</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//百度地图API功能
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件

// var map = new BMap.Map("allmap");
var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时，关闭底图可点功能

map.addControl(top_left_control);        
map.addControl(top_left_navigation); 

 
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
   }

 var lng=getQueryString("longitude");
 var lat=getQueryString("latitude");
 
 var longitude=getQueryString("longitude");
 var latitude=getQueryString("latitude");

 var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 14);
    var marker = new BMap.Marker(point); // 创建点
	map.addOverlay(marker);    //增加点
	var str = "我的位置";
	var opts = {
			   position : point,    // 指定文本标注所在的地理位置
			   offset   : new BMap.Size(-getByteLen(str)*3, 5)    //设置文本偏移量
			}	
	var label = new BMap.Label(str, opts);  // 创建文本标注对象
	label.setStyle({
					 fontSize : "12px",
					 height : "20px",
					 lineHeight : "20px",
					 fontFamily:"微软雅黑"
				  });
   // map.addOverlay(label);   
    
    map.enableScrollWheelZoom(true);
    
    
    
    var xhm=new XMLHttpRequest();
    xhm.open("GET","../../baiduMap/getAllAssetPosition.do",false);
    xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhm.send();
    var data=JSON.parse(xhm.responseText);
    var ticket=data.rows;
   
    console.log(ticket);
    		var points = [];  // 添加海量点数据
    		
          for (var i = 0; i < ticket.length; i++) {
            points.push(new BMap.Point(ticket[i].lng, ticket[i].lat));
          }
          var options = {
              size: BMAP_POINT_SIZE_SMALL,
              shape: BMAP_POINT_SHAPE_STAR,
              color: '#d340c3'
          }
          var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection

          
          pointCollection.addEventListener('click', function (e) {
           // alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
        	  var xhm=new XMLHttpRequest();
 			 xhm.open("GET","../../baiduMap/getAssetGUIDByPosition.do?lng="+e.point.lng+"&lat="+e.point.lat,false);
 			 xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 			 xhm.send();
 			var data=JSON.parse(xhm.responseText);
 			var obj=data.roomInfo;
 			var url="../../"+data.url;
 			total=data.total;
 			console.log(total);
 			if(total==1){
 			var content="<h4 style='margin:0 0 5px 0;padding:0.2em 0'> 资产名称 : "+obj.address+"</h4>"+
 			"<img style='float:right;margin:4px' id='imgDemo' src="+url+" width='139' height='104'/>"+
 			"<p>"+
        	 	" 管理分区 : "+obj.manageRegion+" "+
         	" 资产性质 : "+obj.roomProperty+" "+
         	" 资产编号 : "+obj.num+" </br>"+
         	" 面积 : "+obj.buildArea+" m<sup>2</sup> "+
         	" 租金 :"+obj.hire+" "+
         	"</p>"+"</div>";
 			var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
             map.openInfoWindow(infoWindow,new BMap.Point(e.point.lng, e.point.lat)); //开启信息窗口
 			}else{
 				console.log(data.list);
 				rows=data.list;
 		        div1=document.getElementById('div1')
 				var tab="<table border=1 width=700>";
 			        for(var i=0;i<rows.length;i++){
 			        	var obj=rows[i];
 			        	tab+="<tr>";
 			        	tab+="<td> 资产名称 : "+obj.address+" </td>";
 			        	tab+="<td> 管理分区 : "+obj.manageRegion+" </td>";
 			        	tab+="<td> 资产性质 : "+obj.roomProperty+" </td>";
 			        	tab+="<td> 资产编号 : "+obj.num+" </td>";
 			        	tab+="<td> 面积 : "+obj.buildArea+" m<sup>2</sup> </td>";
 			        	tab+="<td> 租金 :"+obj.hire+" </td>";	               
 			            tab+="<td>"+"<img style='float:right;margin:4px' id='imgDemo' src="+url+" width='50' height='30'/>"+"</td>";
 			            tab+="</tr>";
 			        }    
 			        tab+="</table>";
 				
 				var content="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>  资产数量 : "+data.total+"</h4>"+
 			"<p>"+
        	 	"  "+tab+" "+
         	"</p>"+"</div>";
 			var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
             map.openInfoWindow(infoWindow,new BMap.Point(e.point.lng, e.point.lat));
 			}
          });
     map.addOverlay(pointCollection);  // 添加Overlay
    
    
     var options2 = {
      		 size: BMAP_POINT_SIZE_SMALL,
               shape: BMAP_POINT_SHAPE_STAR,
               color: 'green'
       }

    	var points2 = [];

       var xhm=new XMLHttpRequest();
       xhm.open("GET","../../baiduMap/getAllAsset.do?roomProperty=住宅房",false);
       xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xhm.send();
       var data=JSON.parse(xhm.responseText);
       var ticket=data.rows;
       
       for (var i = 0; i < ticket.length; i++) {
           points2.push(new BMap.Point(ticket[i].lng, ticket[i].lat));
         }
       
       //console.log(points2);
       
    	var pointCollection2 = new BMap.PointCollection(points2, options2);
      
    	 pointCollection2.addEventListener('click', function (e) {
           // alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
    		 var xhm=new XMLHttpRequest();
			 xhm.open("GET","../../baiduMap/getAssetGUIDByPosition.do?lng="+e.point.lng+"&lat="+e.point.lat,false);
			 xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			 xhm.send();
			var data=JSON.parse(xhm.responseText);
			var obj=data.roomInfo;
			var url="../../"+data.url;
			total=data.total;
			console.log(total);
			if(total==1){
			var content="<h4 style='margin:0 0 5px 0;padding:0.2em 0'> 资产名称 : "+obj.address+"</h4>"+
			"<img style='float:right;margin:4px' id='imgDemo' src="+url+" width='139' height='104'/>"+
			"<p>"+
       	 	" 管理分区 : "+obj.manageRegion+" "+
        	" 资产性质 : "+obj.roomProperty+" "+
        	" 资产编号 : "+obj.num+" </br>"+
        	" 面积 : "+obj.buildArea+" m<sup>2</sup> "+
        	" 租金 :"+obj.hire+" "+
        	"</p>"+"</div>";
			var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow,new BMap.Point(e.point.lng, e.point.lat)); //开启信息窗口
			}else{
				console.log(data.list);
				rows=data.list;
		        div1=document.getElementById('div1')
				var tab="<table border=1 width=700>";
			        for(var i=0;i<rows.length;i++){
			        	var obj=rows[i];
			        	tab+="<tr>";
			        	tab+="<td> 资产名称 : "+obj.address+" </td>";
			        	tab+="<td> 管理分区 : "+obj.manageRegion+" </td>";
			        	tab+="<td> 资产性质 : "+obj.roomProperty+" </td>";
			        	tab+="<td> 资产编号 : "+obj.num+" </td>";
			        	tab+="<td> 面积 : "+obj.buildArea+" m<sup>2</sup> </td>";
			        	tab+="<td> 租金 :"+obj.hire+" </td>";	               
			            tab+="<td>"+"<img style='float:right;margin:4px' id='imgDemo' src="+url+" width='50' height='30'/>"+"</td>";
			            tab+="</tr>";
			        }    
			        tab+="</table>";
				
				var content="<h4 style='margin:0 0 5px 0;padding:0.2em 0'> 位置 :"+obj.city+obj.district+
				" 资产数量 : "+data.total+"</h4>"+
			"<p>"+
       	 	"  "+tab+" "+
        	"</p>"+"</div>";
			var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow,new BMap.Point(e.point.lng, e.point.lat));
			}
          });
    	
    	map.addOverlay(pointCollection2);
     
 
    /*
    var geoc = new BMap.Geocoder();  

    //获取标注位置信息    
    function getAttr(){
		var p = marker.getPosition();       //获取marker的位置
		alert("marker的位置是" + p.lng + "," + p.lat);   
	}
 
 
    var xhm=new XMLHttpRequest();
    xhm.open("GET","../../baiduMap/getAssetsByPoint.do?limit=100&offset=0&lng="+lng+"&lat="+lat+"&distance=1500",false);
    xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhm.send();
    var ticket=JSON.parse(xhm.responseText);
    console.log(ticket);
    addDeck(ticket.rows);
 
function addDeck(ticket){	

// console.log(ticket);
var json_data = new Array();

for(var i=0;i<ticket.length;i++){
	json_data[i]=[ticket[i].lng,ticket[i].lat,
	              ticket[i].address];
}

console.log(json_data);

var pointArray = new Array();
for(var i=0;i<json_data.length;i++){
	var point=new BMap.Point(json_data[i][0], json_data[i][1]);
	var myIcon = new BMap.Icon("../../img/blackPoint.jpg", new BMap.Size(30,38));
	var marker = new BMap.Marker(point,{icon:myIcon}); // 创建点
	map.addOverlay(marker);    //增加点

	marker.addEventListener("click",attribute);
}
//让所有点在视野范围内
map.setViewport(pointArray);

}

*/

//获取覆盖物位置
function attribute(e){
	var p = e.target;
    var hidden_lng=p.getPosition().lng;
    var hidden_lat=p.getPosition().lat;
    
    $.get("../../baiduMap/getAssetGUIDByPosition.do",{
    	lng:hidden_lng,
    	lat:hidden_lat
    }, function(data){
    	var obj=$.parseJSON(data).roomInfo;
    	var assetGuid=encodeURI(obj.guid);
    	location.href="assetDetail.html?guid="+assetGuid+"&latitude="+lat+"&longitude="+lng;
    });
    
}	

function getDistance(lng,lat){
	var pointA = new BMap.Point(longitude,latitude);  // 创建点坐标A--大渡口区
	var pointB = new BMap.Point(lng,lat);  // 创建点坐标B--江北区
	var d=map.getDistance(pointA,pointB)/1000;
	return d.toFixed(2)+' KM';  //获取两点距离,保留小数点后两位
}

function getByteLen(val) {    //传入一个字符串
    var len = 0;
    for (var i = 0; i < val.length; i++) {
        if (val[i].match(/[^\x00-\xff]/ig) != null) //全角 
            len += 2; //如果是全角，占用两个字节  如果mysql中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节
        else
            len += 1; //半角占用一个字节
    }
    return len;
 }       

</script>
